<template>
  <div>
    <el-container>
      <el-header>
        <!-- 左侧 -->
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-menu-item index="home">首页</el-menu-item>
          <el-menu-item index="html">HTML</el-menu-item>
          <el-menu-item index="css">CSS</el-menu-item>
          <el-menu-item index="js">JS</el-menu-item>
          <el-menu-item index="node">Node</el-menu-item>
          <!-- 右侧用户 -->
          <el-menu-item style="float:right">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-avatar
                  size="small"
                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                ></el-avatar>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="login">
                  {{ userMessage.username ? userMessage.username : "用户名" }}
                </el-dropdown-item>
                <el-dropdown-item command="send" @click.native="sendPage()">
                  写文章
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="logout()"
                  command="logout"
                  divided
                >
                  登出
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <el-card class="box-card">
          <el-main>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column
                prop="user"
                label="用户"
                width="140"
              ></el-table-column>
              <el-table-column
                prop="title"
                label="文章名"
                width="120"
              ></el-table-column>
              <el-table-column prop="content" label="内容"></el-table-column>
              <el-table-column prop="up" label="点赞"></el-table-column>
              <el-table-column
                label="时间"
              >
                <template slot-scope="scope">
                  {{ scope.row.create_time | newTime}}
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'userIndex',
  data () {
    return {
      userMessage: {},
      tableData: [],
      dialogVisible: false,
      row: {}
    }
  },
  created () {
    this.userMessage = JSON.parse(window.localStorage.getItem('user'))
    request({
      methods: 'GET',
      url: 'http://localhost:3000/userArticle',
      params: {
        user: this.userMessage.username
      }
    })
      .then((res) => {
        this.tableData = res.data.data
        console.log('请求成功')
      })
      .catch((err) => {
        console.log('发送失败', err)
      })
  },
  methods: {
    sendPage () {
      this.$router.push({
        name: 'publishArticle'
      })
    },
    handleEdit (index, row) {
      this.$router.push({
        name: 'upData',
        params: {
          id: row.id
        }
      })
      console.log(row)
    },
    handleDelete (index, row) {
      this.row = row
      this.dialogVisible = true
      this.handleClose()
    },
    handleClose () {
      this.$confirm('确认删除？')
        .then(() => {
          console.log(this.row)
          request({
            method: 'GET',
            url: 'http://localhost:3000/delArticle',
            params: {
              headers: {
                Authorization: this.userMessage.token
              },
              id: this.row.id
            }
          })
            .then(() => {
              this.$router.go(0)
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {})
    },
    logout () {
      window.localStorage.removeItem('user')
      this.userMessage = '用户名'
      this.$router.push({
        name: 'login'
      })
    }
  },
  filters: {
    newTime: function (data) {
      data = new Date(data)
      return `
        ${data.getFullYear()}-${data.getMonth()}-${data.getDate()}
        ${data.getHours()}:${data.getMinutes()}:${data.getSeconds()}
      `
    }
  }
}
</script>

<style scoped>
.cell {
  width: 50px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
